<template>
  <div class="setting-form12">
    <Row type="flex" align="middle" justify="center">
      <Col>
        <Form ref="formDynamic" :model="formDynamic" :rules="ruleValidate" :label-width="110">
          <FormItem
            v-for="(item, index) in formDynamic.items"
            :key="index"
            label="店内区域名称："
            :prop="'items.' + index + '.value'"
            :rules="{ required: true, validator: validatePass, trigger: 'blur' }">
            <Row type="flex" align="middle">
                <Col>
                  <Input type="text" v-model="item.value" style='width:280px' clearable @on-keyup='keyUp' :maxlength='20'></Input>
              </Col>
              <Col style='margin-left:16px'>
                <Icon type="ios-trash" style='padding-right:20px' @click="handleRemove(index)" size='20' v-if='formDynamic.items.length > 1'/>
                <Icon type="ios-add-circle" style='color: #2D8CF0' @click="handleAdd" size='20' v-if='index === formDynamic.items.length-1'/>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formDynamic')" style="width:100px;margin-top:8px">确定</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </div>
</template>
<script>
import { getDicQuery, setDicSave } from '@/api/setting'
export default {
  data () {
    const validatePass = (rule, value, callback) => {
      var regexp = /[^\u4e00-\u9fa5a-zA-Z0-9]/
      if (value === '') {
        callback(new Error('区域名称不能为空'))
      } else if (regexp.test(value)) {
        callback(new Error('只能输入数字、英文或中文'))
      } else {
        callback()
      }
    }
    return {
      validatePass: validatePass,
      title: '店内区域设置',
      formDynamic: {
        items: [
          {
            value: 'A',
            index: 1
          },
          {
            value: 'B',
            index: 2
          },
          {
            value: 'C',
            index: 3
          },
          {
            value: 'D',
            index: 4
          },
          {
            value: 'E',
            index: 5
          },
          {
            value: 'F',
            index: 6
          }
        ]
      },
      ruleValidate: {},
      paramter: {
        'merchantId': this.$store.state.user.merchantId,
        'msType': '0'
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let arr = []
          this.formDynamic.items.forEach((ele) => {
            arr.push(ele.value)
          })
          let data = Object.assign({}, this.paramter, { 'shopArea': arr.join('|') })
          setDicSave(data).then((res) => {
            if (res.data.status === 200) {
              this.$Message.success('设置成功!')
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
      })
    },
    handleAdd () {
      if (this.formDynamic.items.length < 10) {
        this.index++
        this.formDynamic.items.push({
          value: '',
          index: this.index
        })
      } else {
        this.$Message.error('最多添加10个店内区域')
      }
    },
    handleRemove (index) {
      if (this.formDynamic.items.length > 1) {
        this.formDynamic.items.splice(index, 1)
      }
    },
    keyUp (e) {
      var regexp = /[^\u4e00-\u9fa5a-zA-Z0-9]/
      e.target.value = e.target.value.replace(regexp, '')
      // this.$refs.formDynamic.resetFields()
    }
  },
  mounted () {
    let key = Object.assign({}, this.paramter, { 'dictKeys': 'shopArea' })
    getDicQuery(key).then((res) => {
      if (res.data.status === 200) {
        let getData = res.data.data[0].shopArea
        if (getData || getData === 0) {
          getData = (getData + '').split('|')
          let newArr = []
          getData.forEach((ele, idx) => {
            let addObj = {}
            addObj.index = idx + 1
            addObj.value = ele
            newArr.push(addObj)
          })
          this.formDynamic.items = newArr.map((val) => {
            return val
          })
        }
      } else {
        this.$Message.error(`${res.data.error}`)
      }
    })
  }
}
</script>

<style scoped>
  .setting-form12{
    padding-top: 60px;
    height: 100%;
  }
</style>
